<template>
  <div class="page">
    <div class="header-bar">
      <div class="header">
        <div class="title">消息</div>
        <div class="image">
          <div class="icon">
            <van-icon name="friends-o" size="24" @click="toCantact()" />
          </div>
          <div class="icon add">
            <van-icon name="plus" size="24" @click="show = true" />
          </div>
        </div>
      </div>
    </div>
    <!---- 聊天列表 --->
    <div class="home">
      <div class="my-search">
        <van-search v-model="value" placeholder="请输入搜索关键词"  @click="toSearch()"/>
      </div>
      <div class="my-message">
        <ul>
          <li
            class="list-item"
            v-for="(msg, index) in messageList"
            :key="index"
            @click="Chat(index)"
          >
            <div
              class="list-box"
              @touchstart="touchStart"
              @touchend="touchEnd"
              data-type="0"
            >
              <div class="my-user-pic">
                <van-image
                  width="55"
                  height="55"
                  radius="5"
                  :src="msg.imageurl"
                />
              </div>
              <div class="my-msg">
                <div class="name-msg">
                  <p class="name">{{ msg.name }}</p>
                  <p class="msg">
                    {{ msg.lastfriendname }}:{{ msg.lastmessage }}
                  </p>
                </div>
                <div class="time-msg-count">
                  <p class="time">{{ msg.time | formateTime }}</p>
                  <p class="msg-count" v-show="msg.messagecount > 0">
                    <van-tag round>{{
                      msg.messagecount | formateCount
                    }}</van-tag>
                  </p>
                </div>
              </div>
            </div>
            <div class="btn-box" ref="remove" data-type="0">
              <!-- <van-button square type="danger" text="删除" />
              <van-button square type="primary" text="收藏" /> -->
              <div class="btn btn-zhiding">置顶</div>
              <div class="btn btn-remove">删除</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <van-overlay :show="show" @click="show = false" duration="0.5">
      <div class="proup">
        <div class="menu">
          <div class="menu-icon"><van-icon size="20" name="add-o" /></div>
          <div class="menu-name">创建群聊</div>
        </div>
        <div class="menu">
          <div class="menu-icon"><van-icon size="20" name="manager-o" /></div>
          <div class="menu-name">加好友</div>
        </div>
        <div class="menu">
          <div class="menu-icon"><van-icon size="20" name="scan" /></div>
          <div class="menu-name">扫一扫</div>
        </div>
        <div class="menu">
          <div class="menu-icon"><van-icon size="20" name="exchange" /></div>
          <div class="menu-name">面对面快传</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { updateTimeShow } from "@/util/dateformat.js";
export default {
  data() {
    return {
      value: "",
      messageList: [],
      //滑动需要的参数
      // startX: 0, //触摸位置
      // endX: 0, //结束位置
      // moveX: 0, //滑动时的位置
      // disX: 0, //移动距离
      // deleteSlider: "" //滑动时的效果,使用v-bind:style="deleteSlider"
      startX: 0,
      endX: 0,
      startY: 0,
      endY: 0,
      show: false
    };
  },
  mounted() {
    //显示底部导航栏
    this.$store.commit("showTabBar");
    this.getMessageList();
  },
  methods: {
    getMessageList() {
      this.$api
        .getMessageList({})
        .then(e => {
          console.log(e);
          if (e.result == "success") {
            this.messageList = e.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    Chat(index) {
      console.log(index);
      // this.$router.push({ path: "/chat", query: { userId: 123 } });
      if (this.checkSlide()) {
        this.restSlide();
      } else {
        this.$router.push({
          path: "/chat"
        });
      }
    },
    toCantact() {
      this.$router.push("/contact");
    },
    toSearch(){
      this.$router.push("/search");
    },
    //滑动的方法
    // 滑动开始
    touchStart(e) {
      // 记录初始位置
      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    // 滑动结束
    touchEnd(e) {
      // 当前滑动的父级元素
      let parentElement = e.currentTarget;
      //获取当前元素的下一个元素
      let nextElement = e.currentTarget.nextElementSibling;
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX;
      this.endY = e.changedTouches[0].clientY;

      //滑动距离
      let X = this.startX - this.endX;
      let Y = this.startY - this.endY;

      // 左滑
      if (
        parentElement.dataset.type == 0 &&
        X > 30 &&
        Math.abs(X) > Math.abs(Y)
      ) {
        this.restSlide();
        parentElement.dataset.type = 1;
        nextElement.dataset.type = 1;
      }
      // 右滑
      if (
        parentElement.dataset.type == 1 &&
        X < -30 &&
        Math.abs(X) > Math.abs(Y)
      ) {
        this.restSlide();
        parentElement.dataset.type = 0;
        nextElement.dataset.type = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },
    // 判断当前是否有滑块处于滑动状态
    checkSlide() {
      let listItems = document.querySelectorAll(".list-box");
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          return true;
        }
      }
      return false;
    },
    // 复位滑动状态
    restSlide() {
      let listItems = document.querySelectorAll(".list-box");
      let btnItems = document.querySelectorAll(".btn-box");
      // 复位
      for (let i = 0; i < listItems.length; i++) {
        listItems[i].dataset.type = 0;
        btnItems[i].dataset.type = 0;
      }
    }
  },
  filters: {
    formateTime: function(value) {
      if (!value) return "";
      let time = updateTimeShow(Number(value));
      return time;
    },
    formateCount: function(value) {
      if (!value) return "";
      if (Number(value) < 99) return value;
      return value + "+";
    }
  }
};
</script>

<style lang="less" scoped>
.header-bar {
  position: fixed;
  height: 40px;
  width: 100%;
  padding: 10px;
  background: #f7f8fa;
  z-index: 2;
  .header {
    z-index: 3;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .title {
      font-size: 23px;
      font-weight: 600;
    }
    .image {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        padding-right: 10px;
        margin-top: 2px;
      }
      .add {
        padding-right: 20px;
      }
    }
  }
}
.home {
  padding: 50px 0px;
  .my-search {
    padding: 10px 10px;
    .van-search {
      padding: 0px;
      .van-search__content {
        background-color: #ffffff;
      }
      .van-cell {
        line-height: 30px;
      }
    }
  }
  .my-message {
    ul {
      background-color: #ffffff;
      li {
        position: relative;
        padding: 0px 10px;
        .list-box {
          width: 100%;
          padding: 10px 0px;
          font-size: 13px;
          display: flex;
          justify-content: space-between;
          .my-user-pic {
            padding-right: 10px;
          }
          .my-msg {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .name {
              font-size: 19px;
              padding-bottom: 8px;
            }
            .msg {
              color: #bcbec1;
            }
            .time-msg-count {
              text-align: right;
              .van-tag--default {
                background-color: #e4e4e4;
              }
            }
            .time {
              padding-bottom: 8px;
              color: #7c7e83;
            }
          }
        }
        .btn-box {
          position: absolute;
          top: 10px;
          right: 1px;
          display: flex;
          .btn {
            padding: 19px;
            color: #ffffff;
          }
          .btn-zhiding {
            background-color: gray;
          }
          .btn-remove {
            background-color: red;
          }
        }
      }
      .list-box[data-type="0"] {
        transform: translate3d(0, 0, 0);
      }
      .list-box[data-type="1"] {
        transform: translate3d(-150px, 0, 0);
      }
      .btn-box[data-type="0"] {
        z-index: -1;
      }
      .btn-box[data-type="1"] {
        z-index: 1;
      }
    }
  }
}
.proup {
  position: absolute;
  top: 60px;
  right: 0px;
  width: 180px;
  background: #ffffff;
  .menu {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    .menu-icon {
      padding-right: 10px;
      margin-top: 5px;
    }
    .menu-name {
      font-size: 17px;
    }
  }
}
.van-overlay {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
